<template>
  <div id="app">
    <div class="left-side">
      <textarea v-model="jsonInput" placeholder="输入要格式化的JSON" class="full-height"></textarea>
    </div>
    <div class="middle">
      <input v-model="deep">
      <button @click="formatJson">>></button>
      <button @click="towardsLeft"><<</button>

    </div>
    <div class="right-side" style="display: flex;flex-direction: column">
      <div>

        <vue-json-pretty v-if="formattedJson != null" v-model="formattedJson" :collapsedNodeLength="collapsedNodeLength" :deep="deep" showLength showLineNumber
                         showIcon showSelectController editable></vue-json-pretty>
      </div>
    </div>
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  name: 'App',
  components: {
    VueJsonPretty,
  },
  data() {
    return {
      jsonInput: null,
      formattedJson: null,
      collapsedNodeLength:10000,
      deep:10,
    };
  },
  methods: {
    formatJson() {
      try {
        const parsedJson = JSON.parse(this.jsonInput);
        this.formattedJson = parsedJson;
      } catch (error) {
        this.formattedJson = 'Invalid JSON';
      }
    },
    towardsLeft() {
      this.jsonInput = JSON.stringify(this.formattedJson, null, 2);
      debugger
    },
  },
};
</script>

<style scoped>
#app {
  display: flex;
}

.left-side, .right-side, .middle {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 680px;
}

.left-side, .right-side {
  flex: 1;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  align-items: flex-start;
}

.middle {
  display: flex;
  flex-direction: column;
  width: 80px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}


textarea.full-height {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
